/* enum */
import { ComponentNameEnum } from '@src/component/business/BizChatPanel/chat/model/enum'
/* vue */
import { defineComponent, PropType } from "vue";
/* types */
import { SettingGPTServiceItem } from '@gpt/types';
/* util */
import { getLocalesOssUrl } from '@src/util/assets'
import { SettingGPTServiceTypeEnum } from '@src/modules/setting/gpt/model';

enum ChatAIAppServiceRadioEventEnum {
  Change = 'change',
  Click = 'click'
}

export default defineComponent({
  name: ComponentNameEnum.ChatAIAppServiceRadio,
  emits: [
    ChatAIAppServiceRadioEventEnum.Change,
    ChatAIAppServiceRadioEventEnum.Click
  ],
  props: {
    value: {
      type: String as PropType<string>,
      default: ''
    },
    list: {
      type: Array as PropType<SettingGPTServiceItem[]>,
      default: () => []
    },
    onChange: {
      type: Function
    }
  },
  data() {
    return {
      
    }
  },
  computed: {
    className(): string {
      return ComponentNameEnum.ChatAIAppServiceRadio
    },
    classNames(): Record<string, boolean> {
      return {
        [ComponentNameEnum.ChatAIAppServiceRadio]: true
      }
    },
    twoRowAppTypes(): string[] {
      return [
        SettingGPTServiceTypeEnum.Common,
        SettingGPTServiceTypeEnum.Intelligent,
        SettingGPTServiceTypeEnum.BI,
        SettingGPTServiceTypeEnum.ChineseToEnglish
      ]
    }
  },
  methods: {
    getRadioItemClassNames(type: string): Record<string, boolean> {
      return {
        [`${this.className}__item-two-row`]: this.twoRowAppTypes.includes(type)
      }
    },
    onChangeHandler(value: string) {
      this.$emit(ChatAIAppServiceRadioEventEnum.Change, value)
    },
    renderRadioItem(item: SettingGPTServiceItem) {
      
      const fileName = 'xiao_bao_' + item.type + '.png'
      const iconImage = getLocalesOssUrl(fileName)
      
      return (
        <div class={`${this.className}__item`}>
          <div class={`${this.className}__item__icon`}>
            <img src={iconImage} alt=""/>
          </div>
          <div class={`${this.className}__item__name`}>
            <div class={`${this.className}__item__name__title`}>
              {item.name}
            </div>
            <div class={`${this.className}__item__name__description`}>
              {item.description}
              {item.descriptionBottom}
            </div>
          </div>
        </div>
      )
    }
  },
  render() {
    return (
      <div class={this.classNames}>
        <el-radio-group
          value={this.value}
          onInput={this.onChangeHandler}
        >
          {this.list.map((item: SettingGPTServiceItem) => {
            return (
              <el-radio 
                border 
                label={item.type} 
                class={this.getRadioItemClassNames(item.type)}
              >
                {this.renderRadioItem(item)}
              </el-radio>
            )
          })}
        </el-radio-group>
      </div>
    )
  }
});